<template>
  <div class="app-container">
    <div class="filter-container">
      <span class="filter-title filter-item">身份所属</span>
      <k-select
        v-model="listQuery.userType"
        class="filter-item right-item"
        style="width:100px"
        :select-params="dict.type.IDENTITY_TYPE"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">用户类型</span>
      <k-select
        v-model="listQuery.roleId"
        class="filter-item right-item"
        style="width:100px"
        :select-params="[{ label: '主播', value: 3 }, { label: '玩家', value: 2 }]"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">雷场名称</span>
      <k-select
        v-model="listQuery.minefieldId"
        class="filter-item right-item"
        style="width:100px"
        :select-params="minefieldNameList"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">雷区名称</span>
      <k-select
        v-model="listQuery.minefieldDetailsId"
        class="filter-item right-item"
        style="width:100px"
        :select-params="mineNameList"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">雷区序号</span>
      <k-select
        v-model="listQuery.mineSort"
        class="filter-item right-item"
        style="width:100px"
        :select-params="[{ label: '1', value: 1 }, { label: '2', value: 2 }, { label: '3', value: 3 }, { label: '4', value: 4 }, { label: '5', value: 5 }, { label: '6', value: 6 }]"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">雷区状态</span>
      <k-select
        v-model="listQuery.mineStatus"
        class="filter-item right-item"
        style="width:100px"
        :select-params="[{ label: '成功', value: 0 }, { label: '失败', value: 1 }, { label: '已解锁', value: 2 }]"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">用户行为</span>
      <k-select
        v-model="listQuery.behavior"
        class="filter-item right-item"
        style="width:100px"
        :select-params="[{ label: '成功并结束', value: 0 }, { label: '失败并结束', value: 1 }, { label: '继续扫雷', value: 2 }]"
        @handleSelectEvent="handleFilter"
      />
      <span class="filter-title filter-item">扫雷时间</span>
      <k-date-picker v-model="timeValue" class="filter-item" @hqchang="handleFilter" />

      <k-input
        v-model.trim="listQuery.mobile"
        class="filter-item"
        is-search
        placeholder="进行搜索"
        :search-fun="handleFilter"
        @keyup.enter.native="handleFilter"
      />
    </div>
    <br>
    <!--表格相关 -->
    <el-table
      ref="multipleTable"
      :data="listData"
      border
      fit
      highlight-current-row
      :show-summary="!authorityHandle(251)"
      :summary-method="getSummaries"
      style="width: 100%; border-radius: 8px; margin-top: 30px;"
      :header-cell-style="{ background: '#F6F5FA', color: '#4E4F62' }"
      @sort-change="sortChange"
    >
      <el-table-column min-width="60px" type="index" label="序号" align="center" />
      <el-table-column prop="mobile" min-width="100px" label="用户名" align="center" />
      <el-table-column prop="userType" min-width="100px" label="身份所属" align="center" />
      <el-table-column prop="minefieldName" min-width="80px" label="雷场名称" align="center" />
      <el-table-column prop="minefieldPrice" min-width="80px" label="雷场价值" align="center" />
      <el-table-column prop="minefieldDetailsName" min-width="100px" label="雷区名称" align="center" />
      <el-table-column prop="minefieldSort" min-width="50px" label="雷区序号" align="center" />
      <el-table-column min-width="80px" label="雷区状态" align="center" :formatter="formatter" />
      <el-table-column prop="rayGood" min-width="100px" label="雷区获得" align="center" />
      <el-table-column prop="rayGoodPrice" min-width="80px" label="饰品价值" align="center" />
      <el-table-column min-width="70px" label="用户行为" align="center" :formatter="matterBehavior" />
      <el-table-column prop="finalGoodName" min-width="100px" label="最终获得饰品" align="center" />
      <el-table-column prop="finalGoodPrice" min-width="80px" label="最终获得饰品价值" align="center" />
      <el-table-column prop="mineTime" min-width="100px" label="扫雷时间" align="center" show-overflow-tooltip="" />
    </el-table>
    <pagination
      v-show="totalRows > 0"
      :total="totalRows"
      :page.sync="listQuery.pager.pageNo"
      :limit.sync="listQuery.pager.pageSize"
      @pagination="loadData"
    />
  </div>
</template>

<script>
import Pagination from '@/components/Pagination'
import { minefieldDetailsData, sumPrice } from '@/api/magicReocrd/index'
import { listMinefieldData, listMinefieldDetailsData } from '@/api/minefield/index'

export default {
  name: 'Extension',
  components: { Pagination },
  dicts: ['IDENTITY_TYPE'],
  data() {
    return {
      currentUserId: 0,
      isActiveIndex: -1,
      recordList: [],
      openBattleDetailDialog: false,
      openBattleRecordDialog: false,
      listData: [],
      recordData: [],
      totalRows: 0, // 分页组件--数据总条数
      recordPager: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        sort: '', // 排序字段 为对应列名,
        direction: '', // 排序 正向(asc)逆向(desc),
        startTime: undefined, // 饰品外观',
        endTime: undefined, // 饰品类别',
        key: '' // 箱子名称或关键词 箱子配置界面所用'
      },
      listQuery: {
        pager: {
          pageNo: 1,
          pageSize: 10,
          totalRows: '',
          start: ''
        },
        startTime: '',
        endTime: '',
        sort: '', // 排序字段 为对应列名,
        direction: '', // 排序 正向(asc)逆向(desc),
        key: '', // 饰品名称',
        userType: undefined, // 身份所属
        roleId: undefined, // 用户类型
        mineSort: undefined, // 雷区序号
        behavior: undefined, // 用户行为
        minefieldId: undefined, // 雷场id
        mobile: undefined,
        mineStatus: undefined, // 雷区状态
        minefieldDetailsId: undefined, // 雷区名称
        field: undefined // 总计传值
      },
      battle_count: null, //  对战场次
      win_percent: null, // 胜率
      battle_obtain: null, // 对战获得价值
      timeValue: '',
      minefieldNameList: [], // 雷场名称
      mineNameList: [] // 雷场名称
    }
  },
  watch: {
    timeValue(val) {
      console.log(this.timeValue)
      this.listQuery.startTime = this.timeValue ? this.timeValue[0] : null
      this.listQuery.endTime = this.timeValue ? this.timeValue[1] : null
    }
  },
  created() {
    this.loadData()
    this.tableDate()
    // 获取雷场名称
    listMinefieldData(this.recordPager).then(res => {
      const data = res.data
      console.log(data)
      for (let i = 0; i < res.data.rows.length; i++) {
        this.minefieldNameList.push({ label: res.data.rows[i].minefieldName, value: res.data.rows[i].id })
        console.log(this.minefieldNameList)
      }
    })
    // 获取雷区名称||序号
  },
  methods: {
    // 表格的排序条件发生变化的时候会触发该事件
    sortChange(column, prop, order) {
      this.listQuery.sort = column.prop
      if (column.order === 'ascending') {
        this.listQuery.direction = 'asc'
      } else if (column.order === 'descending') {
        this.listQuery.direction = 'desc'
      }
      this.loadData()
    },
    loadData() {
      minefieldDetailsData(this.listQuery).then(res => {
        const data = res.data
        this.listData = data.rows
        this.totalRows = data.totalRows
      })
    },
    formatter(row) {
      console.log('hjh', row)
      const statusMap = {
        0: '成功',
        1: '失败',
        2: '已解锁'
      }

      return statusMap[row.status]
    },
    matterBehavior(row) {
      const statusMaps = {
        0: '成功并结束',
        1: '失败并结束',
        2: '继续扫雷'
      }
      return statusMaps[row.behavior]
    },
    // 搜索查询事件
    handleFilter() {
      console.log('111', this.listQuery)
      this.mineNameList = []
      listMinefieldDetailsData(this.recordPager).then((res) => {
        const data = res.data
        for (let i = 0; i < res.data.rows.length; i++) {
          this.mineNameList.push({ label: res.data.rows[i].detailsName, value: res.data.rows[i].id })
        }
        // this.listQuery.minefieldDetailsId = this.mineNameList.map((item) => {
        //   console.log(item)
        // })
        for (let i = 0; i < this.mineNameList.length; i++) {
          if (this.mineNameList[i].label == this.listQuery.detailsName) this.listQuery.minefieldDetailsId = this.mineNameList[i].id
        }
        this.boxList = data.rows
        // this.totalRows = data.totalRows
      })
      this.listQuery.pager.pageNo = 1
      this.loadData()
      if (this.battle_count != null) {
        this.battle_count = null
      }
      if (this.win_percent != null) {
        this.win_percent = null
      }
      if (this.battle_obtain != null) {
        this.battle_obtain = null
      }
      this.tableDate()
    },
    tableDate() {
      console.log('dasdas')
      if (!this.authorityHandle(209)) return
      this.$nextTick(() => {
        const html3 = this.$refs.multipleTable.$refs.footerWrapper.querySelector('.el-table__footer')
          .querySelectorAll('td')[4]
          .querySelector('.cell')
        html3.innerHTML = `${this.battle_count != null ? this.battle_count : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html3.onclick = () => {
          this.listQuery.field = 'minefield_price'
          sumPrice(this.listQuery).then(res => {
            this.battle_count = res.data
            this.tableDate()
          })
        }
        const html4 = this.$refs.multipleTable.$refs.footerWrapper.querySelector('.el-table__footer')
          .querySelectorAll('td')[9]
          .querySelector('.cell')
        html4.innerHTML = `${this.win_percent != null ? this.win_percent : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html4.onclick = () => {
          this.listQuery.field = 'ray_good_price'
          sumPrice(this.listQuery).then(res => {
            this.win_percent = res.data
            this.tableDate()
          })
        }
        const html5 = this.$refs.multipleTable.$refs.footerWrapper.querySelector('.el-table__footer')
          .querySelectorAll('td')[12]
          .querySelector('.cell')
        html5.innerHTML = `${this.battle_obtain != null ? this.battle_obtain : ''} <a  style="text-decoration: underline;color: blue"><i class="el-icon-refresh"></i></a>`
        html5.onclick = () => {
          this.listQuery.field = 'final_good_price'
          sumPrice(this.listQuery).then(res => {
            this.battle_obtain = res.data
            this.tableDate()
          })
        }
      })
    },
    getSummaries(param) {
      const { columns } = param
      const sums = []
      columns.forEach((column, index) => {
        if (index === 0) sums[index] = '总计'
        else if (column.property === 'battleCount') {
          sums[index] = ''
        } else if (column.property === 'winPercent') {
          sums[index] = ''
        } else if (column.property === 'battleObtain') {
          sums[index] = ''
        }
      })
      return sums
    }

  }
}
</script>

<style lang="scss" scoped>
$borderColor: #E8E8E8; // 主色调
$backColor: #F5F5F5; // 主色调
$mainColor: #3b425d; // 主色调

.filter-container {
  width: 100%;
  height: 48px;
  line-height: 48px;

  .filter-item {
    display: inline-block;
    vertical-align: middle;
    margin-bottom: 10px;
  }

  .right-item {
    margin-right: 10px;
  }

  .kInput {
    position: absolute;
    right: 20px;
  }

  .filter-title {
    height: 48px;
    line-height: 48px;
    font-size: 16px;
    font-weight: 500;
    margin-right: 22px;
    color: #14162E;
  }

  .user-item {
    margin-left: 10px;
    margin-right: 20px;
  }

  .user-status,
  .account-status {
    margin-right: 20px;
  }
}

.table-cell {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.record_container {}

.record_dialog {
  ::v-deep .el-dialog__body {
    padding: 30px 80px;
    height: 70%;
  }
}

.addBox-dialog {
  ::v-deep .el-dialog__body {
    padding: 30px 80px;
  }

  .table_contanier {
    display: flex;
    flex-direction: column;

    .top_area {
      display: flex;
      flex-direction: row;
      justify-content: space-around;
      margin-bottom: 20px;
    }

    .row_cell {
      display: flex;
      flex-direction: row;
      border: 1px solid $borderColor;
      border-right: none;
      border-bottom: none;
    }

    .cell {
      text-align: center;
      width: 160px;
      line-height: 60px;
      height: 60px;
      border-right: 1px solid $borderColor;
      border-bottom: 1px solid $borderColor;
      transform: translateY(1px);

      i {
        transition: .3s;

        &.active {
          transform: rotate(90deg);
        }
      }
    }

    .backcell {
      background: $backColor;
    }

    .child {
      padding-left: 30px;
    }

    .expand_container {
      height: 0;
      overflow: hidden;
      transition: 0.3s;
    }
  }
}

.image-div {
  display: flex;
  flex-direction: row;
  justify-content: center;

  &:last-child {
    margin-right: 20px;
  }

  .image-item {
    position: relative;
    width: 70px;
    height: 70px;

    .imageicon {
      width: 70px;
      height: 70px;
    }

    .boxCount {
      display: flex;
      justify-content: center;
      align-items: center;
      width: 19px;
      height: 19px;
      font-size: 14px;
      font-style: normal;
      font-weight: 700;
      position: absolute;
      color: $mainColor;
      right: 0;
      top: 0;
    }

    &::before {
      display: block;
      content: '×';
      font-size: 13px;
      font-weight: 700;
      position: absolute;
      color: $mainColor;
      right: 0;
      top: 0;
      transform: translateX(-15px);
    }
  }

}
</style>
